import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

import VueBus from 'vue-bus'

import * as echarts from 'echarts'

// 按需引入
import { 
  Button, 
  Form, 
  FormItem, 
  Input,
  Message,
  Table,
  TableColumn,
  Select,
  Option,
  Pagination,
  Carousel,
  CarouselItem,
  Menu
} from 'element-ui';


Vue.config.productionTip = false

// element comonents
Vue.use(Button)
Vue.use(Form)
Vue.use(FormItem)
Vue.use(Input)
Vue.use(Table)
Vue.use(TableColumn)
Vue.use(Select)
Vue.use(Option)
Vue.use(Pagination)
Vue.use(Carousel)
Vue.use(CarouselItem)
Vue.use(Menu)

Vue.prototype.$message = Message;

Vue.prototype.$echarts = echarts;


// 在vue中挂载bus 用于兄弟组件之间的传参
Vue.use(VueBus)
/**
 * vue
 *  组件：
 *    插槽：  
 *      匿名插槽：没有名字的插槽 直接使用<slot></slot>占位   父级：<Title> 1906A </Title>
 *      具名插槽：具有名字的插槽，定义插槽的时候 需要附上名字，
 *                插槽具有默认名称default <slot name="header"></slot>  父级：<Title><template slot="header"> 1906A </template></Title>
 *  组件之间通讯方式 
 *    1、父 -> 子通讯：通过给子组件上定义属性，子组件中通过props去接收父组件传来的参数实现
 *    2、子 -> 父通讯：通过$emit在子组件中创建自定义事件，父组件中使用子组件的创建的事件来传递参数
 *    3、兄弟之间通讯：通过在vue实例中挂载$bus, 在A组件中顶一个发布者消息（this.$bus.$emit('消息名称'， '消息参数')）
 *        在B组件中订阅发布者的消息（this.$bus.$on('消息名称'， （消息参数） => {})） 来实现
 *  路由
 *    路由模式：
 *      hash路由：没有缓存
 *      historey路由：拥有缓存
 *    路由的从传参方式：
 *      1.params: 
 *        1-1: /detail/:id: 通过params传参，使用时通过path拼接路径，页面地址栏参数会有路由信息，优点；刷新页面，参数不丢失，缺点：不安全
 *        1-2：/detail 通过params传参，使用name去寻找对应的路由，页面地址上不会显示参数，优点：安全，缺点：刷新页面，参数丢失
 *      2.query：
 *        1-1：/detail 通过params传参，使用this.$router.push({path: '路由路径',query：{key：value}})，
 *              页面地址栏参数会有路由信息，优点；刷新页面，参数不丢失，缺点：不安全
 *    路由守卫
 *      1.全局守卫
 *        1-1：beforeEach（全局前置守卫）：在路由进入页面之前，(to, from, next)=>{} to: 即将进入的路由'对象', from:即将离开的路由'对象', next()：执行函数，可以更改跳转路由的方向
 *        1-2：beforeResolve（全解析守卫）：路由跳转中( to, from, next ) => {}
 *        1-3: afterEach(全局后置钩子)：路由跳转结束，(to, from) => {}
 *      2.路由独享守卫
 *        1-1:beforeEnter(路由独享守卫)：单独对于路由做守卫，(to, from, next) => {}
 *      3.组件内的守卫(写在组件内部，与生命周期同级)
 *        1-1: beforeRouteEnter: 在进入路由后第一个触发的守卫 (to, from, next) => {}
 *        1-2: beforeRouteUpdate: 在当前路由改变，但是该组件被复用时调用，(to, from, next) => {}  举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
 *        1-3: beforeRouteLeave：在切换组件，也是就同当前组件离开时触发  (to, from, next) => {}
 *  vuex(全局状态管理器)
 *     1：state：保存全局状态
 *     2：mutations：同步， 他是修改state的唯一方式，触发：commit('mutations的方法', 参数)
 *     3：actions: 用来做异步处理，通过提交mutations来修改state， dispatch('actions的方法', '参数')
 *     4：getter: state 计算属性
 *     5：module：允许vuex拆分成模块，每一个模块都有自己的state, mutations, actions, getters
 */



new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')
